﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/m.master" %>

<script runat="server"></script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../assets/css/shelf/base.css" rel="stylesheet">
    <link href="../assets/css/plugins/webuploader/webuploader.css" rel="stylesheet" />

    <link href="../assets/img/validate/validate.css" rel="stylesheet">
    <link href="../assets/css/enterpriseLayout/makePlan.css" rel="stylesheet">
    <link href="../assets/css/plugins/stepper/stepper.widget.css" rel="stylesheet" />
    <link href="../assets/css/plugins/iCheck/customsmall.css" rel="stylesheet" />
    <link href="../assets/img/validate/validate.css" rel="stylesheet">
    <style>
        .condition, .module-info .form-group {
            padding: 3px 0;
        }

        .module-info .form-group {
            margin: 0;
            overflow: hidden;
        }

            .module-info .form-group .control-label, .module-info .form-group .form-control {
                float: left;
            }

        .inmodal .modal-body {
            padding: 10px 10px 8px 10px;
        }

        #sizeTable {
            border-left: 1px solid #dfdfdd;
            border-top: 1px solid #dfdfdd;
        }

            #sizeTable th, #sizeTable td {
                width: 40px;
                text-align: center;
                border-right: 1px solid #dfdfdd;
                border-bottom: 1px solid #dfdfdd;
                height: 30px;
                line-height: 30px;
            }

            #sizeTable .inputSize {
                width: 100%;
                height: 100%;
                border: 0;
                text-align: center;
                margin: 0;
            }

        @media (min-width: 768px) {
            .modal-dialog {
                width: 768px;
                margin: 30px auto;
            }
        }

        .condition, .condition-title {
            border-bottom: 1px solid #dfdfdd;
        }
           /*所有表格行高缩小*/
        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 0px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="Server">
    <div class="system-box">
        <div class="right-side">
            <div class="btns-container">
                <div class="modal inmodal" id="addWindow" tabindex="-1" role="dialog" aria-hidden="true">
                    <form id="checkModuleForm" method="get" action="#">
                        <div class="modal-dialog">
                            <div class="modal-content animated bounceInRight">
                                <div class="modal-header">
                                    <span class="editTitle"></span>
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span aria-hidden="true">&times;</span>
                                        <span class="sr-only">关闭</span>
                                    </button>
                                </div>
                                <div id="message" style="display: none"></div>
                              
                                <div class="modal-body">
                                    <table class="module-info" cellpadding="0" cellspacing="0">
                                        <thead></thead>
                                        <tbody>
                                            <tr class="hide">
                                                <td>
                                                    <div class="form-group">
                                                        <label class="control-label">公司代码&nbsp;&nbsp;</label>
                                                        <input id="companyCode" name="companyCode" placeholder="KM" value="KM"
                                                            datacol="yes" err="公司代码" checkexpession="NotNull" readonly="readonly"
                                                            maxlength="10" type="text" class="form-control input-w670" />
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-group">
                                                        <label class="control-label">省市&nbsp;&nbsp;</label>
                                                        <select class="form-control input-w332d5" id="province">
                                                            <option value="">请选择</option>
                                                        </select>
                                                        <select class="form-control input-w332d5 required" id="city" datacol="yes" err="城市" checkexpession="NotNull" autocomplete="off" >
                                                            <option value="">请选择</option>
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-group">
                                                        <label class="control-label">品类&nbsp;&nbsp;</label>
                                                        <select class="form-control input-w332d5 required" id="category" datacol="yes" err="品类" checkexpession="NotNull" autocomplete="off" ></select>
                                                        <label class="control-label">尺码类型&nbsp;&nbsp;</label>
                                                        <select class="form-control input-w262 required" datacol="yes" err="尺码类型" checkexpession="NotNull" autocomplete="off" id="SizeType">
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-group">
                                                        <label class="control-label" style="line-height: normal; text-align: right;">尺码占比&nbsp;&nbsp;<br />
                                                            (%)&nbsp;&nbsp;</label>
                                                        <table id="sizeTable">
                                                            <thead>
                                                                <tr></tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr></tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="addModuleBtn" class="btn btn-primary">保存</button>
                                    <button type="button" id="closeAddBox" class="btn btn-white" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="condition">
                <label>省份</label>
                <select class="form-control input-w160" id="serarch-province">
                    <option value="">请选择</option>
                </select>
                <label>城市</label>
                <select class="form-control input-w160" id="serarch-city">
                    <option value="">请选择</option>
                </select>
                <label>品类</label>
                <select class="form-control input-w160" id="serarch-category">
                    <option value="">请选择</option>
                </select>
            </div>
            <div style="overflow: auto; background: #fff; padding: 0 1px;">
                <%--<div class="tb-head-container">
				<table class="loadTable">
				</table>
			</div>--%>
                <div class="tb-body-container">
                    <table class="loadTable   table table-stripped">
                        <thead></thead>
                        <tbody id="pageList"></tbody>
                    </table>
                </div>
            </div>
            <div class="pageControl"></div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" runat="Server">
    <script src="../assets/js/page/pageControl.js"></script>
    <script src="../assets/js/page/tableControl.js"></script>
    <script src="../assets/js/plugins/iCheck/icheck.min.js"></script>
    <script src="../assets/js/plugins/iCheck/icheckAll.js"></script>
    <script src="../assets/js/plugins/webuploader/webuploader.min.js"></script>
    <script src="../assets/js/framework.js"></script>
    <script src="../assets/img/validate/learunui-validator.js"></script>
    <script>
        $(document).ready(function () {
            var ModuleID = Y.getUrlParam("ModuleID");
            var page = 1;
            var isCreate = true;
            //获取按钮
            commonUtil.loadBtnList(ModuleID, function () {
                $('#editBtn').attr('disabled', 'disabled');
            });

            //获取尺码
            var getSizeList = function (ModelID, callback) {
                $('#sizeTable thead tr').empty();
                $('#sizeTable tbody tr').empty();
                //console.log(ModelID)
                Y.API2('SizeType', 'ReturnModelSize', { }, function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        var opt = '<option value="">请选择</option>';
                        var _list = [];
                        $.each(data, function (i, obj) {
                                if (obj.list[0][0].ModelID == ModelID) {
                                    _list = obj.list;
                                    $.each(_list,
                                        function (j, l) {
                                            opt += "<option vulue='" + l[0].SizeCodeType + "'>" + l[0].SizeCodeType + "</option>";
                                        });
                                }
                        });
                        $("#SizeType").html(opt);
                        $("#SizeType").on("change", function () {
                                   var e = this;
                                    if (_list.length > 0) {
                                    var thHtml = '';
                                    var tbHtml = '';
                                    _list.map(function (item) {
                                        $.each(item, function (j, l) {
                                                if (l.SizeCodeType==$(e).val()){
                                                thHtml += '<th>' + l.SizeName + '</th>';
                                                tbHtml += '<td><input type="number" data-sizeid="' +
                                                    l.SizeID +
                                                    '" class="inputSize ' +
                                                    l.SizeName +
                                                    '" /></td>';
                                                }
                                            });
                                    })
                                    $('#sizeTable thead tr').html(thHtml);
                                    $('#sizeTable tbody tr').html(tbHtml);
                                    }
                                });
                        if (typeof (callback) == 'function')
                            callback();
                    }
                })
            }

            //获取品类
            commonUtil.bindGetDropDownList(['#serarch-category', '#category'], 4, function () {
                getSizeList($('#category').val());
            });
            $(document).on('change', '#category', function () {
                getSizeList($(this).val());
            })

            //加载省份
            var provinceList = [];
            var proName = '';
            Y.API2('OdsErpBasArea', 'GetAllOdsErpBasAreaList', {}, function (data) {
                if (data.Success == false) {
                    swal(data.Message, '', 'error');
                } else {
                    data.map(function (item) {
                        $('#serarch-province').append('<option value="' + item[0].ParentID + '">' + item[0].ParentName + '</option>');
                        $('#province').append('<option value="' + item[0].ParentID + '">' + item[0].ParentName + '</option>');
                        var tempList = [];
                        item.map(function (it) {
                            tempList.push({
                                AreaID: it.AreaID,
                                AreaName: it.AreaName
                            })
                        })
                        provinceList.push({
                            ParentID: item[0].ParentID,
                            ParentName: item[0].ParentName,
                            List: tempList
                        })
                    })
                }
            })

            //省份变更
            var changeProvince = function (pEl, cEl) {
                var value = pEl.val();
                cEl.html('<option value="">请选择</option>');
                if (value == '')
                    return false;
                var html = '';
                provinceList.map(function (item) {
                    if (item.ParentID == value) {
                        item.List.map(function (it) {
                            html += '<option value="' + it.AreaID + '">' + it.AreaName + '</option>';
                        })
                        cEl.append(html);
                        return false;
                    }
                })
            }
            $('#serarch-province').change(function () {
                changeProvince($(this), $('#serarch-city'));
            })
            $('#province').change(function () {
                changeProvince($(this), $('#city'));
            })

            //处理表头
            tableControl.initThead('.tb-body-container  .loadTable', [{
                trClass: '', children: [
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:46px;"><input type="checkbox" id="checkAll" /></span>', tdId: '', tdClass: 'diy-td-w46' },
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:72px;">公司代码</span>', tdId: '', tdClass: 'diy-td-w72 hide' },
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:100px;">城市内码</span>', tdId: '', tdClass: 'diy-td-w100 hide' },
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:150px;">城市名称</span>', tdId: '', tdClass: 'diy-td-w150' },
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:100px;">品类</span>', tdId: '', tdClass: 'diy-td-w250' },
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:100px;">尺码类型</span>', tdId: '', tdClass: 'diy-td-w100' },
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:100px;">尺码</span>', tdId: '', tdClass: 'diy-td-w100' },
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:100px;">占比(%)</span>', tdId: '', tdClass: 'diy-td-w100' },
                    { tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:100px;">差异</span>', tdId: '', tdClass: 'diy-td-w100' },
                ]
            }])
            //多选框样式
            $(".tb-head-container .loadTable").icheckAll({
                checkObj: ".checkItem",//表格下面的选择控件对象 选择器
                checkAllObj: "#checkAll",//全选 选择器
                clickoutBoxCheck: true,//点击行 不选中
            });

            //获取浏览器类型
            var sUserAgent = navigator.userAgent.toLowerCase();
            //计算容器大小
            var calcContainer = function () {
                //计算表格高度
                $('.tb-body-container').height(
                    $('.right-side').height() - $('.condition').outerHeight() -
                    $('.tb-head-container').outerHeight() - (sUserAgent.indexOf('chrome') > -1 ? 70 : 79));
                //计算表格宽度
                //		$('.tb-body-container').width($('.tb-head-container .loadTable').width());
            }
            $(window).resize(function () {
                //重新计算容器高度
                calcContainer();
            })

            //计算差异值
            var pageList = [];
            var submitList = [];
            var calcDiff = function () {
                pageList.map(function (item, i) {

                    var difference = 0;
                    item.map(function (it) {
                      
                        difference += (isNaN(it.SizeRate) ? 0 : parseFloat(it.SizeRate));
                    });
                    difference = Math.round((difference - 100) * 100) / 100;
                    if (difference == 0)
                        $('#pageList .difference').eq(i).removeClass('red').addClass('green');
                    else
                        $('#pageList .difference').eq(i).removeClass('green').addClass('red');

                    $('#pageList .difference').eq(i).text(difference);

                })
            }

            var loadList = function () {
                if ($('#checkAll').is(':checked')) {
                    $('#checkAll').parent().removeClass('checked');
                    $('#checkAll').prop("checked", false);
                }
                pageControl.init('DCBasCitySizeRate', 'GetDCBasCitySizeRateList', {
                    ProID: $('#serarch-province').val(),
                    CityID: $('#serarch-city').val(),
                    ModelID: $('#serarch-category').val(),
                    Page: page,
                    Size: 100,
                    needLayer: true,
                    alwaysCallBack: function () {
                        $('#pageList').empty();
                    }
                }, function (result) {
                    page = result.page;
                    pageList = [];
                    var tBody = [];
                    if (!Y.checkNull(result.data)) {
                        var rdi = result.data.Items;
                        pageList = rdi;
                        if (rdi.length > 0) {
                            rdi.map(function (item, i) {
                                    item.map(function (it, j) {
                                        var tempChild = [];
                                        if (j == 0) {
                                            tempChild = [
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:46px;"><input type="checkbox" class="checkItem" /></span>', tdId: '', tdClass: 'diy-td-w46 border-bottom-bold' },
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:72px;">' + (it.CompanyID || ' ') + '</span>', tdId: '', tdClass: 'CompanyID diy-td-w72 border-bottom-bold hide' },
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:100px;">' + (it.AreaCode || ' ') + '</span>', tdId: '', tdClass: 'AreaCode diy-td-w100 border-bottom-bold hide' },
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:100px;">' + (it.AreaID || ' ') + '</span>', tdId: '', tdClass: 'AreaID diy-td-w100 border-bottom-bold hide' },
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:100px;">' + (it.ParentID || ' ') + '</span>', tdId: '', tdClass: 'ParentID diy-td-w100 border-bottom-bold hide' },
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:100px;">' + (it.ModelID || ' ') + '</span>', tdId: '', tdClass: 'ModelID diy-td-w100 border-bottom-bold hide' },
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:150px;">' + (it.AreaName || ' ') + '</span>', tdId: '', tdClass: 'AreaName diy-td-w150 border-bottom-bold' },
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:100px;">' + (it.ModelName || ' ') + '</span>', tdId: '', tdClass: 'ModelName diy-td-w250 border-bottom-bold' },
                                                { tdText: '', c: 0, r: item.length, tdHtml: '<span style="display:inline-block; width:100px;">' + (it.SizeTypeFlag || ' ') + '</span>', tdId: '', tdClass: 'SizeTypeFlag diy-td-w250 border-bottom-bold' },
                                            ];
                                        }
                                        tempChild.push({ tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:100px;">' + (it.SizeName || ' ') + '</span>', tdId: '', tdClass: 'SizeName diy-td-w100' + (j == item.length - 1 ? ' border-bottom-bold' : '') });
                                        tempChild.push({ tdText: '', c: 0, r: 0, tdHtml: '<span style="display:inline-block; width:100px;">' + (it.SizeRate || ' ') + '</span>', tdId: '', tdClass: 'SizeRate diy-td-w100' + (j == item.length - 1 ? ' border-bottom-bold' : '') });
                                        if (j == 0)
                                            tempChild.push({ tdText: '', c: 0, r: item.length, tdHtml: '<span class="difference" style="display:inline-block; width:100px;"></span>', tdId: '', tdClass: 'diy-td-w100 border-bottom-bold' });

                                        var tempTr = {
                                            trClass: 'gradeX footable-even' + ' ' + it.AreaID + it.ModelID + it.SizeTypeFlag,
                                            children: tempChild
                                        };
                                        tBody.push(tempTr);
                                    })
                                })
                            tableControl.initTbody('.tb-body-container .loadTable', (tBody.length > 0 ? tBody : null), 0, null);
                            $(".loadTable").icheckAll({
                                checkObj: ".checkItem",//表格下面的选择控件对象 选择器
                                checkAllObj: "#checkAll",//全选 选择器
                                clickoutBoxCheck: true,//点击行 不选中
                                clickoutBoxChecked: function (tr) {
                                    $('#editBtn').removeAttr('disabled');
                                    $(tr).removeClass('check');
                                    var trClass = $(tr).attr("class");
                                    trClass = trClass.replace(/gradeX /, "");
                                    trClass = trClass.replace(/footable-even /, "");
                                    trClass = trClass.replace(/footable-even /, "");
                                    trClass = '.' + trClass;
                                    $(trClass).addClass("check");
                                    $(trClass).find(".checkItem").filter(":checkbox").iCheck("check");
                                }
                            });
                            calcContainer();
                            calcDiff();
                            return false;
                        }
                        calcContainer();
                        console.log($('.tb-body-container th:first').width());
                        $('.tb-body-container #pageList').append(
                            '<tr><td style="width:' + ($('.tb-body-container th:first').width() + 1) + 'px;"><i class="fa fa-frown-o"></i></td>' +
                            '<td colspan="6" style="width:' + ($('.tb-body-container .loadTable').width() - $('.tb-body-container th:first').width() - 1) + 'px;">无数据</td></tr>');
                    }
                })
            }
            loadList();

            //导入
            $(".btns-container").on("click", '#importBtn', function () {
                $.ImportExcelTemplate({
                    filetype: 'DCBASCITYSIZERATE',
                    filename: '码比资料',
                    action: 'ImportTemplate',
                    after: function () {
                        //回调方法
                        loadList();
                    }
                });
            });
            inputControl.init({
                els: ['.inputSize'],
                container: '#sizeTable',
                inputEvent: 'blur',
                defValue: '',
                isNum: true,
                inputLength: 5,
                max: 100,
                min: 0,
            });
            //查询按钮
            $(".btns-container").on('click', '#btn-search', function () {
                $('#editBtn').attr('disabled', 'disabled');
                page = 1;
                loadList();
            })
            //新增按钮
            $(".btns-container").on('click', '#addBtn', function () {
                $("#message").hide();
                $('.editTitle').text('新增');
                isCreate = true;
                $('#province').val('');
                $('#city').val('');
                $('#city').html('<option value="">请选择</option>');
                $('#category').val($('#category option:first').attr('value'));
                getSizeList($('#category').val());
                $('#sizeTable .inputSize').val('');
                $('#province').removeAttr('disabled');
                $('#city').removeAttr('disabled');
                $('#category').removeAttr('disabled');
                $('#SizeType').removeAttr('disabled');
            });

            //修改按钮
            $(".btns-container").on('click', '#editBtn', function () {
                $("#message").hide();
                var trs = $('.check');
              
                getSizeList($(trs).eq(0).find(".ModelID").text(), function () {
                   
                    trs.each(function (i, tr) {

                        if (i == 0) {
                            $('#companyCode').val($(tr).find(".CompanyID").text());
                            $('#province').val($(tr).find(".ParentID").text());
                            $('#city')
                                .html('<option value="' +
                                    $(tr).find(".AreaID").text() +
                                    '">' +
                                    $(tr).find(".AreaName").text() +
                                    '</option>');
                            $('#category').val($(tr).find(".ModelID").text());
                            $('#SizeType').val($(tr).find(".SizeTypeFlag").text());
                            $("#SizeType").trigger("change");
                        }
                        $('#sizeTable .' + $(tr).find(".SizeName").eq(0).text()).val($(tr).find(".SizeRate").text());

                    });
                    $('.editTitle').text('编辑');
                    $('#province').attr('disabled', 'disabled');
                    $('#city').attr('disabled', 'disabled');
                    $('#category').attr('disabled', 'disabled');
                    $('#SizeType').attr('disabled', 'disabled');
                });

                isCreate = false;
            })
            //删除按钮
            $(".btns-container").on('click', '#deleteBtn', function () {
                submitList = [];
                $('.tb-body-container .checkItem:checked').each(function () {
                    var tempJson = pageList[$('.tb-body-container .checkItem').index(this)][0];
                    submitList.push({
                        CompanyID: tempJson.CompanyID,
                        ParentID: tempJson.ParentID,
                        AreaID: tempJson.AreaID,
                        AreaName: tempJson.AreaName,
                        ModelID: tempJson.ModelID,
                    });
                })
                if (submitList.length == 0) {
                    swal('请选择要删除的项');
                    return false;
                }

                swal({
                    title: "您确定要删除这条信息吗",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "删除",
                    cancelButtonText: "取消",
                    closeOnConfirm: false
                }, function () {
                    layer.msg('正在删除……', { icon: 16, shade: 0.5, time: 0, maxWidth: 200 });
                    Y.API2('DCBasCitySizeRate', 'DeleteDCBasCitySizeRate', { list: submitList }, function (data) {
                        layer.closeAll('dialog');
                        if (data.Success == false) {
                            swal('删除失败', data.Message, 'error');
                        } else {
                            swal('删除成功', '该信息已被你永久删除', 'success');
                            //刷新列表
                            loadList();
                        }
                    });
                });
            })
            //保存按钮
            $('#addModuleBtn').click(function () {
                if (!CheckDataValid('#checkModuleForm')) {
                    return false;
                }
                var list = [];
                var count = 0;
                $('#sizeTable .inputSize').each(function(index) {
                    var value = parseFloat($(this).val());
                    if (!isNaN(value)) {
                        count += value;
                        var sizeid = $(this).attr('data-sizeid');
                        list.push({
                            CompanyID: $('#companyCode').val(),
                            AreaID: $('#city').val(),
                            AreaName: $("#city").find("option:selected").text(),
                            ModelID: $('#category').val(),
                            SizeTypeFlag: $('#SizeType').val(),
                            SizeRate: value,
                            SizeID: sizeid
                        })
                    }
                });
                if (count.toFixed(2) != 100) {
                    tipCss($("#sizeTable"), '尺码占比总和不满足100%');
                    return false;
                }
                layer.msg('正在保存……', { icon: 16, shade: 0.5, time: 0, maxWidth: 200 });
                Y.API2('DCBasCitySizeRate', "UpdateDCBasCitySizeRate", {
                    list: list
                }, function (data) {
                    layer.closeAll('dialog');
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        $('#closeAddBox').click();
                        loadList();
                    }
                })
            })
        })
    </script>
</asp:Content>

